/*
 * @Author: 何善万 swhe@che300.com
 * @Date: 2023-11-06 10:34:55
 * @LastEditors: 何善万 swhe@che300.com
 * @LastEditTime: 2024-10-23 13:36:07
 * @FilePath: \my-notion-redux\src\routers.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState, useRef, useMemo } from 'react';
import classNames from 'classnames';
import { useSelector } from 'react-redux';
import {useTranslation} from 'react-i18next'
import {isMobile, isDomActive} from '@tools/utils'
import Educational_background from '../json/educational_background';
import * as styles from '../styles/job_section_1.less';


function JobSection1(props) {
    const refDom = useRef();
    const [active, setActive] = useState(false);
    const { t } = useTranslation();
    const {language, isChangeMedia} = useSelector(state => state.global);
    useEffect(() => {
      let isActive = isDomActive(refDom)
      setActive(isActive)
    })
   

    const dataInfoArr = useMemo(() => {
      let educational_background = Educational_background()
      const keys = Object.keys(educational_background);
      const result = [];
      // 如果是移动端一行展示一个，web端展示三个
      let loop_num =  isMobile() ? 1 : 3;
      for (let i = 0; i < keys.length; i += loop_num) {
          const group = [];
          for (let j = 0; j < loop_num && i + j < keys.length; j++) {
              const key = keys[i + j];
              group.push({
                label: key,
                text: educational_background[key]
                 });
          }
          result.push(group);
      }
      return result
   
    }, [language, isChangeMedia])

    return <div ref={refDom} className={classNames(styles.job_section, 'section') }>
      <div className={classNames(styles.title, active ? styles.title_open : '')}>
        {/* 教育背景 */}
        {t('educational_background')}
      </div>
     
      <div className={classNames(styles.content, isMobile() && language === 'en' ? styles.mobile_en_content : '')}>
        <table border={0} cellPadding={0} cellSpacing={0}>
            {
              dataInfoArr.map((item, index) => {
                return <tr key={index}>
                  {
                    item.map((i, idx)=> (
                      <React.Fragment key={idx}>
                          <th>{i.label}：</th>
                          <td>{i.text}</td>
                      </React.Fragment>
                     
                    ))
                  }
                </tr>
               
              })
            }
        </table>
      </div>
  </div>
}

export default JobSection1;
